<template>
  <div class="home">
    <Banner />
    <div class="content">
      <Menu 
        :menu-list="menuList" 
        :current-menu="currentMenu" 
        @menu-change="handleMenuChange" 
      />
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script>
import Banner from './Banner.vue';
import Menu from './Menu.vue';
import Phone from './Phone.vue';
import Laptop from './Laptop.vue';
import Accessory from './Accessory.vue';

export default {
  name: 'Home',
  components: {
    Banner,
    Menu,
    Phone,
    Laptop,
    Accessory
  },
  data() {
    return {
      menuList: [
        { id: 'phone', name: '手机' },
        { id: 'laptop', name: '笔记本' },
        { id: 'accessory', name: '配件' }
      ],
      currentMenu: 'phone', // 默认显示“手机”专区
      phoneList: [
        { id: 1, name: '旗舰手机 Pro', price: 5999, description: '最新款旗舰手机，性能强劲' },
        { id: 2, name: '轻薄手机 Lite', price: 3999, description: '轻薄设计，超长续航' }
      ],
      laptopList: [
        { id: 3, name: '游戏本 X1', price: 8999, description: '高性能游戏本，畅玩 3A 大作' },
        { id: 4, name: '超极本 S1', price: 6999, description: '轻薄便携，商务首选' }
      ],
      accessoryList: [
        { id: 5, name: '无线蓝牙耳机', price: 599, description: '主动降噪，音质出色' },
        { id: 6, name: '快充充电器', price: 199, description: '65W 快充，多协议支持' }
      ]
    };
  },
  computed: {
    currentComponent() {
      // 根据当前菜单，返回对应的组件
      switch (this.currentMenu) {
        case 'phone':
          return 'Phone';
        case 'laptop':
          return 'Laptop';
        case 'accessory':
          return 'Accessory';
        default:
          return 'Phone';
      }
    }
  },
  methods: {
    handleMenuChange(id) {
      this.currentMenu = id; // 切换当前菜单
    }
  }
};
</script>

<style scoped>
.home {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.content {
  display: flex;
}
</style>